<!-- NPM: originally from
     http://googlelatiude.blogspot.com/2011/04/google-map-mashup-with-twitter-live.html
     Although not integrated with Exhibit, there's code in here that can be reused in qtzibit...
     -->
<html>
<head>
<title>Google Maps Twitter Mashup</title>
<style type="text/css">
.twitttab
{
    background-color:#DBEDF5 ;
}
</style>
<link rel='stylesheet' href='../../api/styles/common.css' type='text/css' /> 
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
 var chicago = new google.maps.LatLng(33.601880,-117.866679); //NPM: was "40.73893,-74.006553", which is not chicago either...
initialize(chicago) ;
});

function getaddr()
{
   codeAddress();
}

 function codeAddress() {
    var address = document.getElementById("search").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        alert("Hello");
         map.setCenter(results[0].geometry.location);
          $("#tab tr").remove();
         initialize(results[0].geometry.location);
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }

var markersArray = [];
var map;  
var geocoder ;
 function initialize(chicago) {
 
 
 geocoder = new google.maps.Geocoder();
  map = new google.maps.Map(document.getElementById("map_canvas"), {
    center: chicago,
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  addMarker(chicago);
  deleteOverlays() ;
  addMarker(chicago);
  twitt(chicago.lat(),chicago.lng());
  
  google.maps.event.addListener(map, 'click', addLatLng);
  
  function addLatLng(event)
  {
  //var point1 = new google.maps.LatLng(event.latLng); 
 $("#tab1").hide();   
        $("#tab tr").remove();
  deleteOverlays() ;
  addMarker(event.latLng);  
  twitt(event.latLng.lat(),event.latLng.lng());
               
            
  }

}
var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)

  });

  
  function deleteOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
    markersArray.length = 0;
  }
  cityCircle.setMap(null);
}
  
  var cityCircle;
function addMarker(latlng)
{
  
 var contentString = "Showing tweets from this region";
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,

        });
  markersArray.push(marker);
        google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
  
      var circOptions = {
   strokeColor: "#FF0000",
   strokeOpacity: 0.8,
   strokeWeight: 2,
   fillColor: "#FF0000",
   fillOpacity: 0.35,
   map: map,
   center: latlng,
            radius: 2500 
       };
     cityCircle = new google.maps.Circle(circOptions);
      
}
function twitt(lat,lng)
{ 

$.getJSON("http://search.twitter.com/search.json?geocode="+lat+"%2C"+lng+"%2C25km&callback=?",
        function(data){
  //alert(lat+""+lng);
 
   //alert(data["results"][0]["profile_image_url"]);
  // alert(data["results"][0]);
 
        if(data["results"].length<5)
   min=data["results"].length;
   else
   min=5;
 alert("Top 5 Location Based Twitter Results Displayed Below");

 
    for(i=0;i<min;i++)
    {
 $("#tab").find('tbody')
   .append($('<tr>')
   .append($('<td>&nbsp;<p style="color:#009AC9"><b><u>'+data["results"][i]["from_user"]+
   '</p></u></b><br/><p style="color:#C0C0C0">'+data["results"][i]["text"]+
   '</p></td><td><img src='+data["results"][i]["profile_image_url"]+'></td>')));

    }
                  $("#tab1").show(); 

  }

  );

}  
</script>
</head>
<body>
    <ul id="path">
      <li><img src="../../images/left_arrow_img.png" onclick="window.qml.showExampleChooser();"/></li>
      <li><input type="checkbox" onclick="window.qml.enableScroll(this.checked);"
		 checked="true" class="flickable-checkbox"><span  onclick="(function() { var chk = $('input.flickable-checkbox')[0]; chk.click(); })();">Flickable??</span></input></li>
      <li><large>Google Maps</large></li>
    </ul>
<div id="map_canvas" style="height: 400px; width: 854px;"></div>
<div class="twitttab">
<br/> <br/> 
<p style="color:#009AC9">
To get the Latest Tweet <p style="color:#ff0000">Click on the Map </p><b>OR</b></p>
<br/> 



<p style="color:#ff0000">
Input the Location </p><br/> 
<input type="text" id="search" value='New York' /><input  type="button" onclick="getaddr();" value="Get Latest Tweet" >
</div>
<div class="twitttab" id="tab1" width="480">
<br/> 
<b><h3>
<p style="color:#009AC9">
Latest Tweets Result</p>
</h3>

</b>

</div>
<table class="twitttab" id="tab" style="width: 480px;"><tbody> </tbody> </table>
</div>
</body>
</html>
